<template>
  <el-row>
    <el-col :span="4" v-for="(book,index) in books" v-bind:key="index" :offset="1">
    <BriefIntroduction
      :BookName = book.BookName
      :Author = book.Author
      :Price = book.Price
     >
            <el-image style="width: 100px; height: 100px"
                      :src=book.BookImgRoot
            ></el-image>
    </BriefIntroduction>
    </el-col>
  </el-row>
</template>

<script>
import BriefIntroduction from './BriefIntroduction'
export default {
  name: 'BookList',
  components: {
    BriefIntroduction
  },
  // 初始化 从后台获取书籍列表
  created () {
    this.getBookList()
  },
  methods: {
    getBookList () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('GET', 'http://127.0.0.1:3100/booksInfo/show')
      xmlhttp.send(null)
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.dealRes(xmlhttp.response)
          }
        }
      }
    },
    dealRes (res) {
      let books = JSON.parse(res).books
      for (var i = 0; i < books.length; i++) {
        let tem = {
          BookImgRoot: 'http://127.0.0.1:3100/images/' + books[i].image,
          BookName: books[i].bookName,
          Author: books[i].writer,
          Price: books[i].price,
          Class: books[i].tag
        }
        this.books.push(tem)
      }
    }
  },
  data () {
    return {
      books: [
      ]
    }
  }
}
</script>

<style scoped>

</style>
